<template>
  <div>
    <div class="wrap">
      <canvas id="canvas" class="fl" width="600" height="400"></canvas>
      <div id="control" class="fl">
        <div id="canvas-color">
          <h5>画笔颜色</h5>
          <ul>
            <li style="background: #fef4ac"></li>
            <li style="background: #0018ba"></li>
            <li style="background: #ffc200"></li>
            <li style="background: #f32f15"></li>
            <li style="background: #cccccc"></li>
            <li style="background: #5ab639"></li>
          </ul>
        </div>
        <div id="canvas-brush" style="display: none;">
          <h5>画笔大小</h5>
          <span class="small-brush"></span>
          <span class="middle-brush"></span>
          <span class="big-brush"></span>
        </div>
        <div id="canvas-control">
          <h5>操作</h5>
          <span title="撤回" class="return-control"></span>
          <span title="还原" class="next-control"></span>
          <span title="清除" class="empty-control"></span>
        </div>
        <div id="canvas-drawImage">
          <h5>生成图像</h5>
          <p>
            <button class="drawImage">生成图像</button>
            <button class="uploadImage" @click="upload()">上传图片</button>
          </p>
        </div>
      </div>
    </div>
    <div id="imgDiv"></div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            ctx:null,
            _canvas : null,
        }
    },
    props: ["cvsData",],
    watch:{
        cvsData:function(newData,oldData){
            console.log("旧：",oldData,"新：",newData);
            if(newData!==null){
                this._canvas._initImage(this.ctx);
            }
            
        }
    },
    mounted(){
        var that = this;
        var doc = document,
            canvas = doc.getElementById('canvas'),
            colorDiv = doc.getElementById('canvas-color'),
            brushDiv = doc.getElementById('canvas-brush'),
            controlDiv = doc.getElementById('canvas-control'),
            drawImageDiv = doc.getElementById('canvas-drawImage'),
            imgDiv = doc.getElementById('imgDiv');

        function Canvas() {
            
            this.init.apply(this, arguments);
        }
        Canvas.prototype = {
            //存储当前表面状态数组-上一步
            preDrawAry: [],
            //存储当前表面状态数组-下一步
            nextDrawAry: [],
            //中间数组
            middleAry: [],
            //配置参数
            confing: {
                lineWidth: 1,
                lineColor: "blue",
                shadowBlur: 2
            },
            init: function (oCanvas, oColor, oBrush, oControl, oDrawImage, imgDiv) {
                this.canvas = oCanvas;

                var ctx = that.ctx = this.context = oCanvas.getContext('2d');
                this._initImage(ctx);
                this.colorDiv = oColor;
                this.brushDiv = oBrush;
                this.controlDiv = oControl;
                this.drawImageDiv = oDrawImage;
                this.imgDiv = imgDiv;
                this._initDraw();
                this._draw(oCanvas);
                this.setColor();
                this.setBrush();
                this.preClick();
                this.nextClick();
                this.clearClick();
                this.drawImage(oCanvas);
            },
            _initImage: function(ctx){
                console.log("视频对象：",that.cvsData);
                if(that.cvsData!==null){
                    canvas.width = that.cvsData.clientWidth;
                    canvas.height = that.cvsData.clientHeight;
                    console.log("画布宽高度：",canvas.width,canvas.height);
                    ctx.drawImage(
                    that.cvsData,
                    0,
                    0,
                    canvas.width,
                    canvas.height
                    );
                }
                 /** 加载图片start */
                // var img = new Image();
                // img.onload = function () {
                //     ctx.drawImage(img, 0, 0);
                // }
                // img.src = "/imgs/bigdata.png";
                /** 加载图片end */
                
            },
            _initDraw: function () {
                var preData = this.context.getImageData(0, 0, 600, 400);
                //空绘图表面进栈
                this.middleAry.push(preData);
            },
            //涂鸦主程序
            _draw: function (oCanvas, context) {
                var flag = false;
                var _this = this;
                oCanvas.onmousedown = function (e) {
                    flag = true;
                    // console.log("onmousedown:", flag);
                    var x = e.clientX,
                        y = e.clientY,
                        left = this.parentNode.offsetLeft,
                        top = this.parentNode.offsetTop,
                        canvasX = x - left,
                        canvasY = y - top;
                    _this._setCanvasStyle();
                    //清除子路径
                    _this.context.beginPath();
                    _this.context.moveTo(canvasX, canvasY);
                    //当前绘图表面状态
                    var preData = _this.context.getImageData(0, 0, 600, 400);
                    //当前绘图表面进栈
                    _this.preDrawAry.push(preData);
                    document.onmousemove = function (e) {
                        if (flag) {
                            var x2 = e.clientX,
                                y2 = e.clientY,
                                t = e.target,
                                canvasX2 = x2 - left,
                                canvasY2 = y2 - top;
                            if (t == oCanvas) {
                                _this.context.lineTo(canvasX2, canvasY2);
                                _this.context.stroke();
                            } else {
                                _this.context.beginPath();
                            }
                        }
                        return ;
                    }
                    document.onmouseup = function (e) {
                        flag = false;
                        var t = e.target;
                        if (t == oCanvas) {
                            //当前绘图表面状态
                            var preData = _this.context.getImageData(0, 0, 600, 400);
                            if (_this.nextDrawAry.length == 0) {
                                //当前绘图表面进栈
                                _this.middleAry.push(preData);
                            } else {
                                _this.middleAry = [];
                                _this.middleAry = _this.middleAry.concat(_this.preDrawAry);
                                _this.middleAry.push(preData);
                                _this.nextDrawAry = [];
                                $('.js-next-control').addClass('next-control');
                                $('.next-control').removeClass('js-next-control');
                            }

                            _this._isDraw();
                        }
                        this.onmousemove = null;
                    }

                }
                oCanvas.onmouseup = function () {
                    flag = false;
                    // console.log("onmouseup:", flag);
                }
            },
            //设置画笔
            _setCanvasStyle: function () {
                this.context.lineWidth = this.confing.lineWidth;
                this.context.shadowBlur = this.confing.shadowBlur;
                this.context.shadowColor = this.confing.lineColor;
                this.context.strokeStyle = this.confing.lineColor;
            },
            //设置颜色
            setColor: function () {
                this.colorDiv.onclick = this.bind(this, this._setColor);
            },
            _setColor: function (e) {
                var t = e.target;
                if (t.nodeName.toLowerCase() == "li") {
                    this.confing.lineColor = t.style.backgroundColor;
                    $('.js-border-color').removeClass('js-border-color');
                    $(t).addClass('js-border-color');
                }
            },
            //设置画笔大小
            setBrush: function () {
                this.brushDiv.onclick = this.bind(this, this._setBrush);
            },
            _setBrush: function (e) {
                var t = e.target;
                if (t.nodeName.toLowerCase() == "span") {
                    if (t.className.indexOf("small-brush") >= 0) {
                        this.confing.lineWidth = 3;
                    } else if (t.className.indexOf("middle-brush") >= 0) {
                        this.confing.lineWidth = 6;
                    } else if (t.className.indexOf("big-brush") >= 0) {
                        this.confing.lineWidth = 12;
                    }
                    $('.js-bg-color').removeClass('js-bg-color');
                    $(t).addClass('js-bg-color');
                }
            },
            //判断是否已涂鸦,修改按钮状态
            _isDraw: function () {
                if (this.preDrawAry.length) {
                    // $('.return-control').addClass('js-return-control');
                    // $('.return-control').removeClass('return-control');
                    // $('.empty-control').addClass('js-empty-control');
                    // $('.empty-control').removeClass('empty-control');
                } else {
                    return false;
                }
            },
            //点击上一步-改变涂鸦当前状态
            preClick: function () {
                var pre = this.controlDiv.getElementsByTagName("span")[0];
                pre.onclick = this.bind(this, this._preClick);
            },
            _preClick: function () {
                if (this.preDrawAry.length > 0) {
                    var popData = this.preDrawAry.pop();
                    var midData = this.middleAry[this.preDrawAry.length + 1];
                    this.nextDrawAry.push(midData);
                    this.context.putImageData(popData, 0, 0);
                }
                if (this.nextDrawAry.length) {
                    // $('.next-control').addClass('js-next-control');
                    // $('.next-control').removeClass('next-control');
                }
                if (this.preDrawAry.length == 0) {
                    // $('.js-return-control').addClass('return-control');
                    // $('.return-control').removeClass('js-return-control');
                }
            },
            //点击下一步-改变涂鸦当前状态
            nextClick: function () {
                var next = this.controlDiv.getElementsByTagName("span")[1];
                next.onclick = this.bind(this, this._nextClick);
            },
            _nextClick: function () {
                if (this.nextDrawAry.length) {
                    var popData = this.nextDrawAry.pop();
                    var midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2];
                    this.preDrawAry.push(midData);
                    this.context.putImageData(popData, 0, 0);
                }
                if (this.preDrawAry.length) {
                    // $('.return-control').addClass('js-return-control');
                    // $('.return-control').removeClass('return-control');
                }

                if (this.nextDrawAry.length == 0) {
                    // $('.js-next-control').addClass('next-control');
                    // $('.next-control').removeClass('js-next-control');
                }
            },
            //清空
            clearClick: function () {
                var clear = this.controlDiv.getElementsByTagName("span")[2];
                clear.onclick = this.bind(this, this._clearClick);
            },
            _clearClick: function () {
                var data = this.middleAry[0];
                this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
                this.preDrawAry = [];
                this.nextDrawAry = [];
                this.middleAry = [this.middleAry[0]];
                this._initImage(this.context);
                // this.controlDiv.getElementsByTagName("span")[0].className = "return-control";
                // this.controlDiv.getElementsByTagName("span")[1].className = "next-control";
                // this.controlDiv.getElementsByTagName("span")[2].className = "empty-control";
            },
            //生成图像
            drawImage: function () {
                var btn = this.drawImageDiv.getElementsByTagName("button")[0];
                btn.onclick = this.bind(this, this._drawImage);
            },
            _drawImage: function () {
                var url = this.canvas.toDataURL('image/png'),
                    img = new Image();
                img.src = url;
                this.imgDiv.innerHTML = "";
                this.imgDiv.appendChild(img);
            },
            bind: function (obj, handler) {
                return function () {
                    return handler.apply(obj, arguments);
                }
            }
        }
        that._canvas = new Canvas(canvas, colorDiv, brushDiv, controlDiv, drawImageDiv, imgDiv);
    },
    methods:{
        upload(){
            alert("参考画布上传：https://www.cnblogs.com/xy2c/p/7501314.html");
        }
        
    }
};
</script>
